<script setup>
import { onMounted, ref } from 'vue';
import { getCateByPage } from '@/api/home';

//轮播图逻辑
onMounted(() => {
    let timer = undefined
    const imgs = document.querySelectorAll('.carousel>a')
    const lis = document.querySelectorAll('.carousel ul li')
    const main = document.querySelector('.carousel')
    const leftBtn = document.querySelector('.carousel .left')
    const righttBtn = document.querySelector('.carousel .right')
    main.addEventListener('mouseover', stopAuto)
    main.addEventListener('mouseleave', beginAuto)
    let index = 0
    leftBtn.addEventListener('click', () => {
        hideAll('--')
    })
    righttBtn.addEventListener('click', hideAll)
    function hideAll(sign) {
        if (sign === '--') {
            console.log('执行了');
            --index
            index = index < 0 ? 2 : index
        }
        else if (++index >= 3) {
            index = 0
        }
        imgs.forEach(it => {
            it.style.opacity = 0
        })
        lis.forEach(it => {
            it.className = ''
        })
        imgs[index].style.opacity = 1
        lis[index].className = 'active'

    }
    timer = setInterval(() => {
        hideAll()

    }, 3000)

    function beginAuto() {
        if (!timer) {
            timer = setInterval(() => {
                hideAll()
            }, 3000)
        }
    }
    function stopAuto() {
        clearInterval(timer)
        timer = undefined
    }

}
)

// 获取分类数据
const cateList = ref(undefined)

async function getCateList() {
    const { data: { records } } = await getCateByPage({
        pageNum: 1,
        pageSize: 20,
        name: ''
    })
    cateList.value = records
}
getCateList()
</script>

<template>

    <div class="carousel">
        <div class="nav_list">
            <router-link :to="`/search?cid=${item.id}`" v-for="item in cateList?.slice(0, 9)" :key="item.id">{{ item.name }}</router-link>
            <router-link to="#" class="more">
                •••更多分类•••
                <div class="other_cate">
                    <router-link :to="`/search?cid=${item.id}`" v-for="item in cateList?.slice(9)" :key="item.id">{{ item.name }}</router-link>
                </div>
            </router-link>

        </div>
        <a href="#">
            <img src="/public/swp1.webp" alt="">
        </a>
        <a href="#">
            <img src="/public/swp2.webp" alt="">
        </a>
        <a href="#">
            <img src="/public/swp3.png" alt="">
        </a>
        <div class="btn left"></div>
        <div class="btn right"></div>
        <ul>
            <li class="active"></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</template>

<style scoped lang="less">
.carousel {
    position: relative;
    height: 460px;

    .nav_list {
        position: absolute;
        padding: 20px 0;
        left: 0;
        top: 0;
        z-index: 999;
        height: 100%;
        width: 234px;
        background: rgba(105, 101, 101, .6);
        color: #fff;

        .more {
            .other_cate {
                display: none;
                position: absolute;
                left: 234px;
                top: 0;
                width: 992px;
                height: 100%;
                background: rgba(105, 101, 101, .6);

            }
            &:hover .other_cate{
                display: block;
            }
        }

        a {
            display: block;
            width: 100%;
            height: 42px;
            line-height: 42px;
            padding-left: 30px;
            color: #fff;

            &:hover {
                background-color: #5ebced;
            }
        }
    }

    ul {
        position: absolute;
        right: 26px;
        top: 93%;

        li {
            float: left;
            width: 9px;
            height: 9px;
            border: 2px solid #fff;
            border-radius: 50%;
            margin: 3px;
            // background-color: #5e5851;
            border-color: hsla(0, 0%, 100%, .3);
            background: rgba(0, 0, 0, .4);
        }

        .active {
            background: hsla(0, 0%, 100%, .4);
            border-color: rgba(0, 0, 0, .4);
        }
    }

    .btn {
        cursor: pointer;
        position: absolute;
        top: 30%;
        background: url(/public/icon-slides.png);
        width: 41px;
        height: 69px;
    }

    .left {
        background-position: -85px;
        left: 234px;

        &:hover {
            background-position: 0px;
        }
    }

    .right {
        right: 0;
        background-position: -125px;

        &:hover {
            background-position: -208px;

        }
    }

    &>a {
        position: absolute;
        transition: all 1s;
        opacity: 0;

        img {
            width: 1226px;
            height: 460px;
        }

        &:nth-of-type(1) {
            opacity: 1;
        }
    }
}
</style>
